{% extends 'manage.html' %}
{% load static %}
{% block css %}

  <style>
  .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-default > .panel-heading a {
            text-decoration: none;
        }

        .panel-default > .panel-heading span {
            padding: 0 5px;
        }

        .panel-default > .panel-heading .function .upload {
            overflow: hidden;
        }

        .panel-default > .panel-heading .function .upload input {
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 76px;
            left: -2px;
            overflow: hidden;
        }

        .upload-progress {
            position: fixed;
            right: 2px;
            bottom: 2px;
            width: 400px;
        }

        .upload-progress .progress-error {
            color: red;
        }
  </style>
{% endblock %}
{% block content %}
    <div class="content">
    <div class="panel panel-default" style="margin-top: 20px">
      <!-- Default panel contents -->
      <div class="panel-heading">
        <div>
          <a href="{% url 'web_file' project_id=request.tracer.project.id %}">
            <i class="fa fa-home" aria-hidden="true"></i>
            <span>文件库</span>
          </a>
          {% for record in breadcrumb_list %}
            <a href="{% url 'web_file' project_id=request.tracer.project.id %}?folder={{ record.id }}">
            <i class="fa fa-caret-right" aria-hidden="true"></i>
            <span>{{ record.name }}</span>
          </a>
          {% endfor %}
        </div>
        <div class="function">
                   <div class="btn btn-primary btn-xs upload" style="position: relative">
                        <div><i class="fa fa-upload" aria-hidden="true"></i> 上传文件</div>
                        <input type="file" multiple name="uploadFile" id="uploadFile">
                    </div>
          <a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addModal" data-whatever="新建文件夹">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建文件夹
                    </a>
        </div>
      </div>


      <!-- Table -->
      <table class="table">
        <thead>
          <tr>
            <th>名称</th>
            <th>文件大小</th>
            <th>更新者</th>
            <th>更新时间</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody id="rowList">
        {% for item in file_object_list %}
          <tr>
            <td>
              {% if item.file_type == 1 %}
              <i class="fa fa-file" aria-hidden="true"></i>
              {{ item.name }}
                {% else %}
                <a href="{% url 'web_file' project_id=request.tracer.project.id %}?folder={{ item.id }}">
                    <i class="fa fa-folder" aria-hidden="true"></i>
                    {{ item.name }}
                </a>
              {% endif %}
            </td>
            <td>
              {% if item.file_type == 1 %}
              {{ item.file_size }}
                {% else %}
                    -
            {% endif %}
                  </td>
            <td>{{ item.update_user.username }}</td>
            <td>{{ item.update_datetime }}</td>

             <td>
               {% if item.file_type == 2 %}
                  <i class="fa fa-caret-right" aria-hidden="true"></i>
               <a class="btn btn-success btn-xs"
                  data-toggle="modal"
                  data-target="#addModal"
                  data-whatever="编辑文件夹"
                  data-name="{{ item.name }}"
                  data-fid="{{ item.id }}"
                  >
                 编辑
               </a>
                 {% else %}
                  <a class="btn btn-default btn-xs" href="{% url 'web_file_download' project_id=request.tracer.project.id file_id=item.id %}">
                    <i class="fa fa-cloud-download" aria-hidden="true"></i>

                </a>

               {% endif %}

              <i class="fa fa-caret-right" aria-hidden="true"></i>
               <a
                  class="btn btn-danger btn-xs"
                  data-toggle="modal"
                  data-target="#alertModal"
                  data-fid="{{ item.id }}">
                 <i class="fa fa-trash" aria-hidden="true"></i>
                 删除
               </a>

             </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    </div>


  <!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">

        <form id="form">
        {% csrf_token %}
        <input class="hide" type="text" name="fid" id="fid" >
          {% for field in form %}

  <div class="form-group">
    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
    {{ field }}
  <span class="error-msg">{{ field.errors.0 }}</span>
  </div>
          {% endfor %}
</form>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button id="btnFormSubmit" type="button" class="btn btn-primary">确 定</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4>是否要确定删除？</h4>
                <p style="padding-top: 20px;padding-bottom: 20px;">
                    文件夹中包含的所有的文件都会被删除。
                </p>
                <p style="text-align: right;">
                    <a class="btn btn-default btn-sm" data-dismiss="modal" aria-label="Close">取 消</a>
                    <button id="btnDelete" type="button" class="btn btn-danger btn-sm">确 定</button>
                </p>
            </div>
    </div>
</div>


<div id="uploadProgress" class="upload-progress hide" >
     <div class="panel panel-primary">
       <div class="panel-heading">
                <i class="fa fa-cloud-upload" aria-hidden="true"></i> 上传进度</div>

            <table class="table">
                <tbody id="progressList">


                </tbody>
            </table>

     </div>

</div>


  <div class="hide">
        <table id="progressTemplate">
            <tr>
                <td>
                    <div class="name"></div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
                             aria-valuenow="0"
                             aria-valuemin="0"
                             aria-valuemax="100" style="width: 0%;">
                            0%
                        </div>
                    </div>
                    <div class="progress-error"></div>
                </td>
            </tr>
        </table>
  </div>

  <div class="hide">
      <table id="rowTpl">
            <tr>
                <td>
                    <i class="fa fa-file" aria-hidden="true"></i>
                    <span class="name"></span>
                </td>
                <td class="file_size"></td>
                <td class="username"></td>
                <td class="datetime"></td>
                <td>

                    <a class="btn btn-default btn-xs download">
                        <i class="fa fa-cloud-download" aria-hidden="true"></i>
                    </a>

                    <a class="btn btn-danger btn-xs delete" data-toggle="modal" data-target="#alertModal">
                        <i class="fa fa-trash" aria-hidden="true"></i>
                    </a>
                </td>
            </tr>
        </table>
  </div>
{% endblock %}
{% block js %}
  <script src="{% static 'js/cos-js-sdk-v5.min.js' %}"></script>

    <script>
    var FOLDER_URL = "{% url 'web_file' project_id=request.tracer.project.id %}";
    var FILE_DELETE_URL = "{% url 'web_file_delete' project_id=request.tracer.project.id %}";
    var COS_CREDENTIAL = "{% url 'web_cos_credentials' project_id=request.tracer.project.id %}";
    var FILE_POST = "{% url 'web_file_post' project_id=request.tracer.project.id %}";
    var CURRENRFOLDER = "{{ folder_object.id }}";
    $(function (){
        initAddmodel();
        bindModelSubmit();
        bindDeleteSubmit();
        bindUploadFile();
    })
    function bindUploadFile(){
        $('#uploadFile').change(function (){
            $('#progressList').empty()
            var fileList = $(this)[0].files;//文件对象
            //获取每次要上传的每个文件名称以及大小
             var checkFileList = [];
             {#console.log(fileList)#}
            $.each(fileList,function (index,fileObject){
                //console.log(fileObject.name); 打印文件名
                //上传文件
                var fileName = fileObject.name;
                var  fileSize = fileObject.size;
                checkFileList.push({'name':fileName,'size':fileSize})
            });


            // 这些数据发送后台，进行验证，容量校验，如果没有问题返回临时秘钥，否则返回错误信息
            var cos_credential = new COS({
           getAuthorization: function (options, callback) {
                // 想django后台发送请求，获取临时凭证
                // $.ajax({type:"GET"})
                $.post(COS_CREDENTIAL, JSON.stringify(checkFileList),function (res) {
                    {#console.log(data);#}
                    if (res.status){
                           var credentials = res.data && res.data.credentials;
                    callback({
                        TmpSecretId: credentials.tmpSecretId,
                        TmpSecretKey: credentials.tmpSecretKey,
                        XCosSecurityToken: credentials.sessionToken,
                        StartTime: res.data.startTime,
                        ExpiredTime: res.data.expiredTime,
                    });
                    $('#uploadProgress').removeClass('hide');
                    }else{
                        alert(res.error);
                    }
                });
            }
});


            //上传文件
              $.each(fileList,function (index,fileObject){
                //console.log(fileObject.name); 打印文件名
                //上传文件
                var fileName = fileObject.name;
                var  fileSize = fileObject.size;
                var key = (new Date()).getTime() + "_" + fileName
                var tr = $('#progressTemplate').find('tr').clone();
                tr.find('name').text(fileName);
                $('#progressList').append(tr)
                   cos_credential.putObject({
                      Bucket: '{{ request.tracer.project.bucket }}', /* 必须 */
                      Region: '{{ request.tracer.project.region }}',     /* 存储桶所在地域，必须字段 */
                      Key: key,              /* 必须 */
                      Body: fileObject, // 上传文件对象
                      onProgress: function (progressData) {
                        var percent =  progressData.percent * 100 + '%';
                        tr.find('.progress-bar').text(percent);
                        tr.find('.progress-bar').css('width',percent);

        }
    }, function (err, data) {
        console.log(err || data);
        if (data && data.statusCode === 200){
            //上传成功，将文件提交到后台，并写入数据库
            //当前文件上传成功
            // 不用ajax发请求，用新的请求方法
            $.post(FILE_POST,{name:fileName,
                               key:key,
                               file_size:fileSize,
                               parent:CURRENRFOLDER,
                               etag:data.ETag,
                               file_path:data.Location},function (res){
                           // 在数据库写入成功 ，将已添加的数据在页面上展示
                            var newTr = $('#rowTpl').find('tr').clone();
                            newTr.find('.name').text(res.data.name)
                            newTr.find('.username').text(res.data.username)
                            newTr.find('.file_size').text(res.data.file_size)
                            newTr.find('.datatime').text(res.data.datatime)
                            newTr.find('.delete').attr('data-fid',res.data.id)

                            $('#rowList').append(newTr);

                            //删除自己进度条tr
                            tr.remove()

            })
        }else{
            //上传失败
            tr.find('progress-error').text('上传失败');
        }
    });



            });

        })
    };

    function bindDeleteSubmit(){
        $('#btnDelete').click(function (){
            //获取要删除的id

            $.ajax({

                url:FILE_DELETE_URL,
                type:"GET",
                data:{fid:$(this).attr('fid')},
                dataType:"JSON",
                success: function (res){
                   if (res.status){
                       location.href=location.href;
                   }
                }
            })
        })
    };

    function initAddmodel(){
        $('#addModal').on('show.bs.modal', function (event) {
           var button = $(event.relatedTarget);// Button that triggered the modal
           var recipient = button.data('whatever'); // Extract info from data-* attributes
           var name = button.data('name');
           var fid = button.data('fid');
           var modal = $(this);
           modal.find('.modal-title').text(recipient);
           if (fid){
               //编辑
               //name
               modal.find('#id_name').val(name)
               modal.find('#fid').val(fid)

           }else{
                //新建的时候
           modal.find('.error-msg').empty();
           document.getElementById('form').reset();
           //等于下面这句话
            //$('#form')[0].reset();

           }

});
        $('#alertModal').on('show.bs.modal', function (event) {
           var button = $(event.relatedTarget);// Button that triggered the modal
           var fid = button.data('fid');
           $('#btnDelete').attr('fid',fid);




})
    };

    function bindModelSubmit(){
        $('#btnFormSubmit').click(function (){
            $.ajax({
                url:location.href,
                type:"POST",
                data:$("#form").serialize(),
                dataType:"JSON",
                success:function (res){
                     if (res.status){
                         location.href = location.href
                     }else{
                         $.each(res.error,function (key,value){  //each这里表示循环字典
                           $("#id_"+key).next().text(value[0]);  //网id下一个元素的span标签写错误信息
                       })
                     }
                }
            })
        })
    }

    </script>
{% endblock %}